<!DOCTYPE HTML>
<html>
<head>
    <title>pixi.js example 21 Complex Graphics </title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #000000;
        }
    </style>
    <script src="../../bin/pixi.dev.js"></script>
    <!--<script src="pixi.dev.js"></script>-->
</head>
<body>
    <script>

    var count = 0;

    // create an new instance of a pixi stage
    var stage = new PIXI.Stage(0x3da8bb);


    // create a renderer instance.
    var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);

    // add the renderer view element to the DOM
    document.body.appendChild(renderer.view);

    // create an empty container
    var alienContainer = new PIXI.DisplayObjectContainer();
    alienContainer.position.x = 400;
    alienContainer.position.y = 300;

    
    stage.addChild(alienContainer);

    count = 0;
        
        // start animating
    requestAnimFrame(animate);
    
    var graphics = new PIXI.Graphics().beginFill(0xFF0000);

    var liveGraphics = new PIXI.Graphics().beginFill(0xFF0000);

    var path = [];


    stage.interactive = true;
    
    var isDown = false;
    var color = 0;

    var colors = [0x5D0776, 0xEC8A49, 0xAF3666, 0xF6C84C, 0x4C779A];
    var colorCount = 0;

    var label = new PIXI.Text("Click and drag anywhere do draw complex geometry in pixi / do an art attack", {fill:"white", font:"16px Arial"});
    label.x = 10;
    label.y = 10;
    

    stage.mousedown = function(data)
    {
        isDown = true;
        path = [];
        color = colors[colorCount++ % colors.length];
    }

    stage.mousemove = function(data)
    {
        if(!isDown)return;

        path.push(data.global.x);
        path.push(data.global.y);

    }

    stage.mouseup = function()
    {
        isDown = false;
        graphics.beginFill(color);
        graphics.drawPolygon(path)
        graphics.endFill();
        path = [];    
    }

    stage.addChild(graphics);
    stage.addChild(liveGraphics);
    stage.addChild(label);

    function animate() {
        

        count += 0.1;
        liveGraphics.clear();
        liveGraphics.beginFill(color);
        liveGraphics.drawPolygon(path);
        // render the stage
        renderer.render(stage);

        requestAnimFrame(animate);
    }

    var logo = PIXI.Sprite.fromImage("../../logo_small.png")
    stage.addChild(logo);


    logo.anchor.x = 1;
    logo.position.x = window.innerWidth
    logo.scale.x = logo.scale.y = 0.5;
    logo.position.y = window.innerHeight - 70;
    logo.interactive = true;
    logo.buttonMode = true;
    logo.click = logo.tap = function()
    {
        window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank")
    }

    </script>

    </body>
</html>
